<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>矩形树图</title>
    <style>
        #chart5 {
            width: 1600px;
            height: 1000px;
        }
    </style>
</head>
<body>

<div id="chart5"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
<script>
    let chartDom2 = document.getElementById('chart5');
    let myChart2 = echarts.init(chartDom2, 'dark');
    let option;

    myChart2.showLoading();

    myChart2.showLoading();

    const diskData = [
        {
            "children": [
                {
                    "name": "湖北省",
                    "children": [
                        {"name": "武汉市", "value": 1200000},
                        {"name": "黄石市", "value": 750000},
                        {"name": "十堰市", "value": 680000},
                        {"name": "宜昌市", "value": 800000},
                        {"name": "襄阳市", "value": 900000},
                        {"name": "鄂州市", "value": 500000},
                        {"name": "荆门市", "value": 600000},
                        {"name": "孝感市", "value": 650000},
                        {"name": "荆州市", "value": 700000},
                        {"name": "黄冈市", "value": 720000}
                    ]
                },
                {
                    "name": "广东省",
                    "children": [
                        {"name": "广州市", "value": 14000000},
                        {"name": "深圳市", "value": 13000000},
                        {"name": "珠海市", "value": 2000000},
                        {"name": "汕头市", "value": 1800000},
                        {"name": "佛山市", "value": 7600000},
                        {"name": "韶关市", "value": 3000000},
                        {"name": "湛江市", "value": 2300000},
                        {"name": "肇庆市", "value": 2100000},
                        {"name": "江门市", "value": 2200000},
                        {"name": "茂名市", "value": 2400000}
                    ]
                },
                {
                    "name": "江苏省",
                    "children": [
                        {"name": "南京市", "value": 8400000},
                        {"name": "无锡市", "value": 6500000},
                        {"name": "徐州市", "value": 6100000},
                        {"name": "常州市", "value": 5400000},
                        {"name": "苏州市", "value": 10700000},
                        {"name": "南通市", "value": 7300000},
                        {"name": "连云港市", "value": 4800000},
                        {"name": "淮安市", "value": 4600000},
                        {"name": "盐城市", "value": 5100000},
                        {"name": "扬州市", "value": 4500000}
                    ]
                },
                {
                    "name": "山东省",
                    "children": [
                        {"name": "济南市", "value": 7200000},
                        {"name": "青岛市", "value": 9300000},
                        {"name": "淄博市", "value": 4700000},
                        {"name": "枣庄市", "value": 3900000},
                        {"name": "东营市", "value": 2100000},
                        {"name": "烟台市", "value": 7000000},
                        {"name": "潍坊市", "value": 9300000},
                        {"name": "济宁市", "value": 8300000},
                        {"name": "泰安市", "value": 5500000},
                        {"name": "威海市", "value": 2800000}
                    ]
                },
                {
                    "name": "四川省",
                    "children": [
                        {"name": "成都市", "value": 16000000},
                        {"name": "绵阳市", "value": 5400000},
                        {"name": "自贡市", "value": 3300000},
                        {"name": "攀枝花市", "value": 4200000},
                        {"name": "泸州市", "value": 3500000},
                        {"name": "德阳市", "value": 3800000},
                        {"name": "广元市", "value": 3100000},
                        {"name": "遂宁市", "value": 3200000},
                        {"name": "内江市", "value": 3000000},
                        {"name": "乐山市", "value": 3600000}
                    ]
                },
                {
                    "name": "河南省",
                    "children": [
                        {"name": "郑州市", "value": 10000000},
                        {"name": "开封市", "value": 4800000},
                        {"name": "洛阳市", "value": 7100000},
                        {"name": "平顶山市", "value": 5000000},
                        {"name": "安阳市", "value": 5300000},
                        {"name": "鹤壁市", "value": 2900000},
                        {"name": "新乡市", "value": 6200000},
                        {"name": "焦作市", "value": 3700000},
                        {"name": "濮阳市", "value": 3600000},
                        {"name": "许昌市", "value": 4500000}
                    ]
                },
                {
                    "name": "浙江省",
                    "children": [
                        {"name": "杭州市", "value": 10000000},
                        {"name": "宁波市", "value": 8000000},
                        {"name": "温州市", "value": 9000000},
                        {"name": "嘉兴市", "value": 4700000},
                        {"name": "湖州市", "value": 3000000},
                        {"name": "绍兴市", "value": 5000000},
                        {"name": "金华市", "value": 5800000},
                        {"name": "衢州市", "value": 2500000},
                        {"name": "舟山市", "value": 1100000},
                        {"name": "台州市", "value": 6200000}
                    ]
                },
                {
                    "name": "湖南省",
                    "children": [
                        {"name": "长沙市", "value": 8000000},
                        {"name": "株洲市", "value": 4000000},
                        {"name": "湘潭市", "value": 2800000},
                        {"name": "衡阳市", "value": 7300000},
                        {"name": "邵阳市", "value": 6300000},
                        {"name": "岳阳市", "value": 5600000},
                        {"name": "常德市", "value": 6000000},
                        {"name": "张家界市", "value": 1500000},
                        {"name": "益阳市", "value": 3800000},
                        {"name": "郴州市", "value": 4700000}
                    ]
                },
                {
                    "name": "陕西省",
                    "children": [
                        {"name": "西安市", "value": 12000000},
                        {"name": "宝鸡市", "value": 3700000},
                        {"name": "咸阳市", "value": 5300000},
                        {"name": "渭南市", "value": 5600000},
                        {"name": "铜川市", "value": 2800000},
                        {"name": "延安市", "value": 2200000},
                        {"name": "榆林市", "value": 3800000},
                        {"name": "汉中市", "value": 3400000},
                        {"name": "安康市", "value": 3000000},
                        {"name": "商洛市", "value": 2400000}
                    ]
                },
                {
                    "name": "福建省",
                    "children": [
                        {"name": "福州市", "value": 7300000},
                        {"name": "厦门市", "value": 4200000},
                        {"name": "莆田市", "value": 2900000},
                        {"name": "三明市", "value": 2500000},
                        {"name": "泉州市", "value": 8500000},
                        {"name": "漳州市", "value": 5000000},
                        {"name": "南平市", "value": 2600000},
                        {"name": "龙岩市", "value": 2800000},
                        {"name": "宁德市", "value": 3100000},
                        {"name": "平潭综合实验区", "value": 50000}
                    ]
                },
                {
                    "name": "河北省",
                    "children": [
                        {"name": "石家庄市", "value": 10500000},
                        {"name": "唐山市", "value": 7600000},
                        {"name": "秦皇岛市", "value": 3100000},
                        {"name": "邯郸市", "value": 9400000},
                        {"name": "邢台市", "value": 7300000},
                        {"name": "保定市", "value": 9500000},
                        {"name": "张家口市", "value": 4400000},
                        {"name": "承德市", "value": 3600000},
                        {"name": "沧州市", "value": 7400000},
                        {"name": "廊坊市", "value": 4700000}
                    ]
                },
                {
                    "name": "辽宁省",
                    "children": [
                        {"name": "沈阳市", "value": 8300000},
                        {"name": "大连市", "value": 6900000},
                        {"name": "鞍山市", "value": 3500000},
                        {"name": "抚顺市", "value": 2100000},
                        {"name": "本溪市", "value": 1600000},
                        {"name": "丹东市", "value": 2400000},
                        {"name": "锦州市", "value": 3000000},
                        {"name": "营口市", "value": 2300000},
                        {"name": "阜新市", "value": 1800000},
                        {"name": "辽阳市", "value": 1700000}
                    ]
                },
                {
                    "name": "广西壮族自治区",
                    "children": [
                        {"name": "南宁市", "value": 7100000},
                        {"name": "柳州市", "value": 4000000},
                        {"name": "桂林市", "value": 5300000},
                        {"name": "梧州市", "value": 3300000},
                        {"name": "北海市", "value": 1500000},
                        {"name": "防城港市", "value": 1000000},
                        {"name": "钦州市", "value": 3200000},
                        {"name": "贵港市", "value": 4500000},
                        {"name": "玉林市", "value": 6800000},
                        {"name": "百色市", "value": 3900000}
                    ]
                },
                {
                    "name": "云南省",
                    "children": [
                        {"name": "昆明市", "value": 6800000},
                        {"name": "曲靖市", "value": 6000000},
                        {"name": "玉溪市", "value": 2300000},
                        {"name": "保山市", "value": 2500000},
                        {"name": "昭通市", "value": 5000000},
                        {"name": "丽江市", "value": 1300000},
                        {"name": "普洱市", "value": 2400000},
                        {"name": "临沧市", "value": 2200000},
                        {"name": "楚雄彝族自治州", "value": 2700000},
                        {"name": "红河哈尼族彝族自治州", "value": 4700000}
                    ]
                },
                {
                    "name": "甘肃省",
                    "children": [
                        {"name": "兰州市", "value": 3800000},
                        {"name": "嘉峪关市", "value": 250000},
                        {"name": "金昌市", "value": 1800000},
                        {"name": "白银市", "value": 1700000},
                        {"name": "天水市", "value": 3300000},
                        {"name": "武威市", "value": 1800000},
                        {"name": "张掖市", "value": 1200000},
                        {"name": "平凉市", "value": 2100000},
                        {"name": "酒泉市", "value": 1100000},
                        {"name": "庆阳市", "value": 2200000}
                    ]
                },
                {
                    "name": "贵州省",
                    "children": [
                        {"name": "贵阳市", "value": 4600000},
                        {"name": "六盘水市", "value": 2900000},
                        {"name": "遵义市", "value": 6200000},
                        {"name": "安顺市", "value": 2300000},
                        {"name": "毕节市", "value": 6500000},
                        {"name": "铜仁市", "value": 3200000},
                        {"name": "黔西南布依族苗族自治州", "value": 3000000},
                        {"name": "黔东南苗族侗族自治州", "value": 3500000},
                        {"name": "黔南布依族苗族自治州", "value": 3100000},
                        {"name": "仁怀市", "value": 500000}
                    ]
                },
                {
                    "name": "山西省",
                    "children": [
                        {"name": "太原市", "value": 4400000},
                        {"name": "大同市", "value": 3400000},
                        {"name": "阳泉市", "value": 1300000},
                        {"name": "长治市", "value": 3300000},
                        {"name": "晋城市", "value": 2300000},
                        {"name": "朔州市", "value": 1700000},
                        {"name": "晋中市", "value": 3200000},
                        {"name": "运城市", "value": 5200000},
                        {"name": "忻州市", "value": 3100000},
                        {"name": "临汾市", "value": 4300000}
                    ]
                },
                {
                    "name": "台湾省",
                    "children": [
                        {"name": "台北市", "value": 2600000},
                        {"name": "新北市", "value": 3900000},
                        {"name": "桃园市", "value": 2000000},
                        {"name": "台中市", "value": 2700000},
                        {"name": "台南市", "value": 1800000},
                        {"name": "高雄市", "value": 2700000},
                        {"name": "基隆市", "value": 900000},
                        {"name": "新竹市", "value": 400000},
                        {"name": "嘉义市", "value": 600000},
                        {"name": "新竹县", "value": 500000}
                    ]
                },
                {
                    "name": "吉林省",
                    "children": [
                        {"name": "长春市", "value": 7500000},
                        {"name": "吉林市", "value": 4300000},
                        {"name": "四平市", "value": 3000000},
                        {"name": "辽源市", "value": 1100000},
                        {"name": "通化市", "value": 2100000},
                        {"name": "白山市", "value": 1200000},
                        {"name": "松原市", "value": 2800000},
                        {"name": "白城市", "value": 1800000},
                        {"name": "延边朝鲜族自治州", "value": 2100000}
                    ]
                },
                {
                    "name": "黑龙江省",
                    "children": [
                        {"name": "哈尔滨市", "value": 9500000},
                        {"name": "齐齐哈尔市", "value": 5300000},
                        {"name": "鸡西市", "value": 1700000},
                        {"name": "鹤岗市", "value": 1000000},
                        {"name": "双鸭山市", "value": 1400000},
                        {"name": "大庆市", "value": 2800000},
                        {"name": "伊春市", "value": 1100000},
                        {"name": "佳木斯市", "value": 2400000},
                        {"name": "七台河市", "value": 900000},
                        {"name": "牡丹江市", "value": 2500000}
                    ]
                },
                {
                    "name": "江西省",
                    "children": [
                        {"name": "南昌市", "value": 5200000},
                        {"name": "景德镇市", "value": 1600000},
                        {"name": "萍乡市", "value": 1800000},
                        {"name": "九江市", "value": 4600000},
                        {"name": "新余市", "value": 1100000},
                        {"name": "鹰潭市", "value": 1000000},
                        {"name": "赣州市", "value": 8300000},
                        {"name": "吉安市", "value": 4900000},
                        {"name": "宜春市", "value": 5800000},
                        {"name": "抚州市", "value": 3900000}
                    ]
                },
                {
                    "name": "安徽省",
                    "children": [
                        {"name": "合肥市", "value": 8000000},
                        {"name": "芜湖市", "value": 3500000},
                        {"name": "蚌埠市", "value": 3300000},
                        {"name": "淮南市", "value": 3400000},
                        {"name": "马鞍山市", "value": 2300000},
                        {"name": "淮北市", "value": 2100000},
                        {"name": "铜陵市", "value": 1600000},
                        {"name": "安庆市", "value": 5300000},
                        {"name": "黄山市", "value": 1400000},
                        {"name": "滁州市", "value": 4000000}
                    ]
                },
                {
                    "name": "海南省",
                    "children": [
                        {"name": "海口市", "value": 2200000},
                        {"name": "三亚市", "value": 700000},
                        {"name": "三沙市", "value": 1000},
                        {"name": "儋州市", "value": 900000},
                        {"name": "五指山市", "value": 100000},
                        {"name": "琼海市", "value": 500000},
                        {"name": "文昌市", "value": 500000},
                        {"name": "万宁市", "value": 600000},
                        {"name": "东方市", "value": 400000},
                        {"name": "定安县", "value": 300000}
                    ]
                },
                {
                    "name": "青海省",
                    "children": [
                        {"name": "西宁市", "value": 2300000},
                        {"name": "海东市", "value": 1800000},
                        {"name": "海北藏族自治州", "value": 300000},
                        {"name": "黄南藏族自治州", "value": 280000},
                        {"name": "海南藏族自治州", "value": 450000},
                        {"name": "果洛藏族自治州", "value": 200000},
                        {"name": "玉树藏族自治州", "value": 400000},
                        {"name": "海西蒙古族藏族自治州", "value": 500000}
                    ]
                },
                {
                    "name": "内蒙古自治区",
                    "children": [
                        {"name": "呼和浩特市", "value": 3100000},
                        {"name": "包头市", "value": 2800000},
                        {"name": "乌海市", "value": 600000},
                        {"name": "赤峰市", "value": 4400000},
                        {"name": "通辽市", "value": 3100000},
                        {"name": "鄂尔多斯市", "value": 2100000},
                        {"name": "呼伦贝尔市", "value": 2700000},
                        {"name": "巴彦淖尔市", "value": 1800000},
                        {"name": "乌兰察布市", "value": 2000000},
                        {"name": "兴安盟", "value": 1600000}
                    ]
                },
                {
                    "name": "新疆维吾尔自治区",
                    "children": [
                        {"name": "乌鲁木齐市", "value": 3500000},
                        {"name": "克拉玛依市", "value": 500000},
                        {"name": "吐鲁番市", "value": 600000},
                        {"name": "哈密市", "value": 200000},
                        {"name": "昌吉回族自治州", "value": 1800000},
                        {"name": "博尔塔拉蒙古自治州", "value": 400000},
                        {"name": "巴音郭楞蒙古自治州", "value": 1200000},
                        {"name": "阿克苏地区", "value": 2500000},
                        {"name": "克孜勒苏柯尔克孜自治州", "value": 600000},
                        {"name": "喀什地区", "value": 4400000}
                    ]
                },
                {
                    "name": "西藏自治区",
                    "children": [
                        {"name": "拉萨市", "value": 900000},
                        {"name": "昌都市", "value": 700000},
                        {"name": "山南市", "value": 350000},
                        {"name": "日喀则市", "value": 800000},
                        {"name": "那曲市", "value": 300000},
                        {"name": "阿里地区", "value": 100000},
                        {"name": "林芝市", "value": 200000}
                    ]
                },
                {
                    "name": "宁夏回族自治区",
                    "children": [
                        {"name": "银川市", "value": 2100000},
                        {"name": "石嘴山市", "value": 800000},
                        {"name": "吴忠市", "value": 1300000},
                        {"name": "固原市", "value": 600000},
                        {"name": "中卫市", "value": 1200000}
                    ]
                }
            ]
        }
    ];

    myChart2.hideLoading();
    const formatUtil = echarts.format;

    function getLevelOption() {
        return [
            {
                itemStyle: {
                    borderWidth: 0,
                    gapWidth: 5
                }
            },
            {
                itemStyle: {
                    gapWidth: 1
                }
            },
            {
                colorSaturation: [0.35, 0.5],
                itemStyle: {
                    gapWidth: 1,
                    borderColorSaturation: 0.6
                }
            }
        ];
    }

    // 为每个省份数据添加颜色
    const provinceColors = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
    let colorIndex = 0;

    // 为每个省份及其子城市设置颜色
    function setColorToProvince(provinceData) {
        const color = provinceColors[colorIndex % provinceColors.length];
        provinceData.itemStyle = {
            color: color
        };
        colorIndex++;

        if (provinceData.children) {
            provinceData.children.forEach(function (city) {
                city.itemStyle = {
                    color: color
                };
                if (city.children) {
                    setColorToProvince(city); // 递归设置颜色
                }
            });
        }
    }

    // 应用颜色到所有省份
    diskData.forEach(function (province) {
        setColorToProvince(province);
    });

    myChart2.setOption({
        series: [
            {
                type: 'treemap',
                visibleMin: 300,
                label: {
                    show: true,
                    formatter: '{b}'
                },
                itemStyle: {
                    borderColor: '#fff'
                },
                levels: getLevelOption(),
                drillDownIcon: '▶', // 显示向下的箭头图标
                nodeClick: 'zoomToNode', // 点击节点时，放大查看子节点
                draggable: false, // 禁止拖动
                data: diskData
            }
        ],
        tooltip: {
            formatter: function (info) {
                let value = info.value;
                let treePathInfo = info.treePathInfo;
                let treePath = [];
                for (let i = 1; i < treePathInfo.length; i++) {
                    treePath.push(treePathInfo[i].name);
                }
                return [
                    '<div class="tooltip-title">',
                    formatUtil.encodeHTML(treePath.join('/')),
                    '</div>',
                    'Value: ' + formatUtil.addCommas(value)
                ].join('');
            }
        }
    });
</script>

</body>
</html>